<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组方法</title>
		<script type="text/javascript">
			var arr = ["孙悟空", "猪八戒", "沙悟净"];
			// push()
			// -该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
			// -可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
			var result = arr.push("唐三藏");
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏"]
			arr.push("菩提老祖", "地藏菩萨", "弥勒佛"); 
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨", "弥勒佛"]
			console.log("result = " + result); // result = 4
		
	
			// pop（）
			// -该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨", "弥勒佛"]
			var result = arr.pop();
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			console.log("result = " + result); // result = 弥勒佛
			
			
			// unshift()
			// 向数组开头添加一个或多个元素，并返回新的数组长度
			// 向前边插入元素以后，其他的元素索引会依次调整
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			result = arr.unshift("牛魔王", "二郎神");
			console.log(arr); // ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			console.log("result = " + result); // result = 8
			
			
			// shift()
			// 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
			console.log(arr); // ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			result = arr.shift();
			console.log(arr); // ["二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			console.log("result = " + result); // result = 7
			
			
			// slice()
			// 从某个已有的数组返回选定的元素，可以用来从数组提取指定元素
			// 该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回参数：
			// - 截取开始的位置的索引，包含开始索引
			// - 截取结束的位置的索引，不包含结束索引
			result = arr.slice(0,3);
			console.log(result); // ["二郎神", "孙悟空", "猪八戒"]
			// 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
			result = arr.slice(3);
			console.log(result); // ["沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			// 索引可以传递一个负值，如果传递一个负值，则从后往前计算
			// - -1 倒数第一个
			// - -2 倒数第二个
			result = arr.slice(4, -1);
			console.log(result); // ["唐三藏", "菩提老祖"]
			
			
			// splice()
			// 删除元素，并向数组添加新元素。可以用于删除数组中的指定元素
			// 使用`splice()`会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
			// 参数：
			// 		第一个，表示开始位置的索引
			// 		第二个，表示删除的数量
			arr = ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"];
			result = arr.splice(0, 2);
			console.log(result); // ["牛魔王", "二郎神"]
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			arr = ["牛魔王", "二郎神", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"];
			result = arr.splice(1, 2);
			console.log(result); // ["二郎神", "孙悟空"]
			console.log(arr); // ["牛魔王", "猪八戒", "沙悟净", "唐三藏", "菩提老祖", "地藏菩萨"]
			// 		第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
			arr = ["孙悟空", "猪八戒", "沙悟净", "唐三藏"];
			result = arr.splice(0, 1, "牛魔王", "铁扇公主", "红孩儿");
			console.log(result); // ["孙悟空"]
			console.log(arr); // ["牛魔王", "铁扇公主", "红孩儿", "猪八戒", "沙悟净", "唐三藏"]
			arr = ["孙悟空", "猪八戒", "沙悟净", "唐三藏"];
			result = arr.splice(0, 0, "牛魔王", "铁扇公主", "红孩儿");
			console.log(result); // []
			console.log(arr); // ["牛魔王", "铁扇公主", "红孩儿", "孙悟空", "猪八戒", "沙悟净", "唐三藏"]
			
			
			// ### concat()
			// `concat()`可以连接两个或多个数组，并将新的数组返回
			// 该方法不会对原数组产生影响
			var arr1 = ["孙悟空", "猪八戒", "沙悟净"];
			var arr2 = ["青毛狮子怪", "黄牙老象", "大鹏金翅雕"];
			var arr3 = ["虎力大仙", "鹿力大仙", "羊力大仙"];
			var arr4 = arr1.concat(arr2,arr3,"牛魔王","铁扇公主","红孩儿");
			console.log(arr1); // ["孙悟空", "猪八戒", "沙悟净"]
			console.log(arr2); // ["青毛狮子怪", "黄牙老象", "大鹏金翅雕"]
			console.log(arr3); // ["虎力大仙", "鹿力大仙", "羊力大仙"]
			console.log(arr4); // ["孙悟空", "猪八戒", "沙悟净", "青毛狮子怪", "黄牙老象", "大鹏金翅雕", "虎力大仙", "鹿力大仙", "羊力大仙", "牛魔王", "铁扇公主", "红孩儿"]
			
			
			// ### join()
			// 该方法可以将数组转换为一个字符串
			// 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
			// 在`join()`中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
			// 如果不指定连接符，则默认使用`,`作为连接符
			var arr = ["孙悟空", "猪八戒", "沙悟净"];
			var result = arr.join();
			console.log(arr); // ["孙悟空", "猪八戒", "沙悟净"]
			console.log(result); // 孙悟空,猪八戒,沙悟净
			console.log(typeof result); // string
			result = arr.join("");
			console.log(result); // 孙悟空猪八戒沙悟净
			result = arr.join("@");
			console.log(result); // 孙悟空@猪八戒@沙悟净
			
			
			// ### reverse()
			// 该方法用来反转数组（前边的去后边，后边的去前边）
			// 该方法会直接修改原数组
			var arr = ["孙悟空", "猪八戒", "沙悟净"];
			arr.reverse();
			console.log(arr); // ["沙悟净", "猪八戒", "孙悟空"]
			
			
			// ### sort()
			// 可以用来对数组中的元素进行排序
			// 也会影响原数组，默认会按照Unicode编码进行排序
			var arr = ["f", "b", "a", "h", "e", "d"];
			arr.sort();
			console.log(arr); // ["a", "b", "d", "e", "f", "h"]
			// 即使对于纯数字的数组，使用`sort()`排序时，也会按照Unicode编码来排序
			// 所以对数字进行排序时，可能会得到错误的结果
			arr = [2, 44, 9, 8, 2, 0, 6];
			arr.sort();
			console.log(arr); // [0, 2, 2, 44, 6, 8, 9]
			// 我们可以目己采指正排序的现则我们可以在sort()添加一个回调函数，来指定排序规则
			// 回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
			// 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
			// 浏览器会根据回调函数的返回值来决定元素的顺序，
			// - 如果返回一个大于0的值，则元素会交换位置
			// - 如果返回一个小于等于0的值，则元素位置不变
			arr = [2, 44, 9, 8, 2, 0, 6];
			arr.sort(function(a,b){
				if(a > b){
					return 1;
				} else {
					return -1;
				}
			});
			console.log(arr); // [0, 2, 2, 6, 8, 9, 44]
			// - 如果需要升序排列，则返回`a - b`
			// - 如果需要降序排列，则返回`b - a` 
			arr.sort(function(a,b){
				// 升序排列
				return a - b;
			});
			console.log(arr); // [0, 2, 2, 6, 8, 9, 44]
			arr.sort(function(a,b){
				// 降序排列
				return b - a;
			});
			console.log(arr); // [44, 9, 8, 6, 2, 2, 0]
		</script>
	</head>
	<body>
	</body>
</html>
